<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three test4-2 拉动进度条控制大小</title>
    <script src="js/three.js"></script>
    <script src="js/dat.gui.js"></script>
    <style>
        #container{
            width:90%;
            height:500px;
            border:1px dotted palevioletred;
            margin:0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body onload="threeStart()">
    <div id="container"></div>
</body>
<script>
    var renderer;
    function initThree(){
        width=document.getElementById('container').clientWidth;
        height=document.getElementById('container').clientHeight;
        renderer=new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('container').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF,1.0);
    }
    //设置摄像机
    var camera;
    function initCamera(){
//        camera=new THREE.PerspectiveCamera(45,width/height,1,1000);//透视投影相机
        camera=new THREE.OrthographicCamera(window.innerWidth/-2,window.innerWidth/2,window.innerHeight/2,window.innerHeight/-2,10,1000);//正投影相机
        camera.position.x=0;
        camera.position.y=0;
        camera.position.z=600;
        camera.up.x=0;
        camera.up.y=1;
        camera.up.z=0;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }
    //设置场景
    var scene;
    function initScene(){
        scene=new THREE.Scene();
    }
    //设置灯光
    var light;
    function initLight(){
        light=new THREE.AmbientLight(0xFF0000);
        light.position.set(100,100,200);
        scene.add(light);
        light=new THREE.PointLight(0x00FF00);
        light.position.set(0,0,300);
        scene.add(light);
    }

    //设置物体
    var cube;
    function initObject(){
        var geometry=new THREE.CylinderGeometry(70,100,200);
        var material=new THREE.MeshLambertMaterial({color:0xFFFFFF});
        var mesh=new THREE.Mesh(geometry,material);
        mesh.position=new THREE.Vector3(0,0,0);
        scene.add(mesh);
    }

    function threeStart(){
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        createGUI();
        animation();
    }

    var text;
    function createGUI(){
        var FizzyText=function(){
            this.fov=45;
        };
        text=new FizzyText();
        var gui=new dat.GUI();
        gui.add(text,"fov",0,180).name('视角大小');
    }

    function animation(){
        changeFov();
        renderer.render(scene,camera);
        requestAnimationFrame(animation);
    }

    //设置摄像机的视角
    function setCameraFov(fov){
        camera.fov=fov;
        camera.updateProjectionMatrix();
    }
    //改变摄像机的视角
    function changeFov(){
        setCameraFov(text.fov);
    }
</script>
</html>